<template>
	<Pannel>
		<view class="home hasBar">
			<view class="top_container" :style="[bgStyle]" v-if="handlerLoading">
				<view class="selectCom">
					<uni-data-select v-model="selectYear" :localdata="rangeYears" @change="change" :clear="false">
					</uni-data-select>
				</view>

				<!-- 员工信息 -->
				<view class="card-user-msg">
					<view class="row-1">
						<view class="image-box">
							<image src="" mode="scaleToFill" />
						</view>
						<view class="user-info">
							<view class="user-name">你好，陈小丽</view>
							<view class="user-dept">高新四支部党员</view>
						</view>
						<view class="out-soft">
							<view class="icon iconfont icon-h"></view>
							<view class="text">退出</view>
						</view>
					</view>
					<view class="row-2">
						<view class="inner-row-2"></view>
					</view>
					<view class="row-3">
						<view class="row-item" @click="onJump('/pages-lzqk/lzqk/lzqk')">
							<image class="image-box image-box-1" :src="lzqkImg" mode="scaleToFill" />
							<view class="text">履职情况</view>
						</view>
						<view class="bar"></view>
						<view class="row-item" @click="onJump('/pages-zbhd/zbhd/zbhd')">
							<image class="image-box image-box-2" :src="cyzbhdImg" mode="scaleToFill" />
							<view class="text">参与支部活动</view>
						</view>
					</view>
				</view>

				<!-- 卡片区域-1 -->
				<view class="card-box-1">
					<view class="left-box" @click="onJump('/pages-dangyuan/dangyuan/dangyuan')">
						<image class="image-box" :src="cardImg1" mode="scaleToFill" />
						<view class="msg-box">
							<view class="title">党员信息总览</view>
							<view class="msg">
								<view class="text">党员人数</view>
								<view class="num">{{ dangYuanFenXiData.dyrs || 0 }}</view>
							</view>
						</view>
					</view>
					<view class="right-box">
						<!-- 参政议政 -->
						<view class="item-box right-top-box" @click="onJump('/pages-canzheng/canzheng/canzheng')">
							<image class="image-box" :src="cardImg2" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ canZhengScreenList.personCount || 0 }}</view>
							</view>
						</view>
						<!-- 社情民意 -->
						<view class="item-box right-bottom-box" @click="onJump('/pages-sheqing/sheqing/sheqing')">
							<image class="image-box" :src="cardImg3" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ sheQingScreenList.hzMap.all || 0 }}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 卡片区域-2 -->
				<view class="card-box-2">
					<!-- 宣传文章 -->
					<view class="item-box left-box" @click="onJump('/pages-wenzhang/wenzhang/wenzhang')">
						<image class="image-box" :src="cardImg4" mode="scaleToFill" />
						<view class="msg">
							<view class="text">总数</view>
							<view class="num">{{ wenZhangScreenList.wzCount || 0 }}</view>
						</view>
					</view>
					<!-- 宣传报道 -->
					<view class="item-box right-box" @click="onJump('/pages-xuanchuanbaodao/xuanchuanbaodao/xuanchuanbaodao')">
						<image class="image-box" :src="cardImg5" mode="scaleToFill" />
						<view class="msg">
							<view class="text">总数</view>
							<view class="num">{{ hzMapDatas.hzMap.all || 0 }}</view>
						</view>
					</view>
				</view>

				<!-- 卡片区域-3 -->
				<view class="card-box-3">
					<!-- 社会服务 -->
					<view class="card-box-inner left-box" @clcik="onJump('/pages-shehui/shehui/shehui')">
						<view class="item-box">
							<image class="image-box" :src="cardImg6" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ sheHuiScreenList.fwCount || 0 }}</view>
							</view>
						</view>
						<!-- 扶贫工作 -->
						<view class="item-box" @click="onJump('/pages-fupin/fupin/fupin')">
							<image class="image-box" :src="cardImg7" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ fuPinData || 0 }}</view>
							</view>
						</view>
						<!-- 祖统工作 -->
						<view class="item-box" @click="onJump('/pages-zuzhihuodong/zuzhihuodong/zuzhihuodong')">
							<image class="image-box" :src="cardImg8" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ zuTongList || 0 }}</view>
							</view>
						</view>
					</view>

					<view class="card-box-inner right-box">
						<!-- 组织活动 -->
						<view class="item-box" @click="onJump('/pages-zuzhihuodong/zuzhihuodong/zuzhihuodong')">
							<image class="image-box" :src="cardImg9" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ zuzhihuodongScreenList.eventCount || 0 }}</view>
							</view>
						</view>
						<!-- 组织发展 -->
						<view class="item-box" @click="onJump('/pages-zuzhi/zuzhi/zuzhi')">
							<image class="image-box" :src="cardImg10" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ zuZhiFaZhanList || 0 }}</view>
							</view>
						</view>
						<!-- 获奖情况 -->
						<view class="item-box" @click="onJump('/pages-huojiang/huojiang/huojiang')">
							<image class="image-box" :src="cardImg11" mode="scaleToFill" />
							<view class="msg">
								<view class="text">总数</view>
								<view class="num">{{ priceList || 0 }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</Pannel>

</template>
<script>
import {
	dangyuanfenxi,
	canzhengdaping,
	xcbdDetailHome,
	zuzhihuodongdaping,
	fupin,
	xuanchuanwenzhang,
	sqmyDetailHome,
	shfwHomeApp,
	zzfzHomeApp,
	ztgzHomeListApp,
	gzhjHomeCount,
	dict,
	lastYear,
	admin
} from '../../api';

import bg1 from '@/utils/base64/bg1.js';
import lzqk from '@/utils/base64/home/lzqk.js';
import cyzbhd from 'utils/base64/home/cyzbhd.js';
import card_1 from '@/utils/base64/home/card_1.js';
import card_2 from '@/utils/base64/home/card_2.js';
import card_3 from '@/utils/base64/home/card_3.js';
import card_4 from '@/utils/base64/home/card_4.js';
import card_5 from '@/utils/base64/home/card_5.js';
import card_6 from '@/utils/base64/home/card_6.js';
import card_7 from '@/utils/base64/home/card_7.js';
import card_8 from '@/utils/base64/home/card_8.js';
import card_9 from '@/utils/base64/home/card_9.js';
import card_10 from '@/utils/base64/home/card_10.js';
import card_11 from '@/utils/base64/home/card_11.js';
import Pannel from '../../components/Pannel/Pannel.vue';

export default {
	options: {
		styleIsolation: 'shared',

	},
	components: {
		Pannel
	},

	data() {
		return {
			timeYear: '',
			handlerLoading: false,
			dangYuanFenXiData: '',
			canZhengScreenList: '',
			xuanChuanScreenList: '',
			hzMapDatas: '',
			fuPinData: '',
			zuzhihuodongScreenList: '',
			wenZhangScreenList: '',
			sheHuiScreenList: '',
			sheQingScreenList: '',
			zuZhiFaZhanList: '',
			zuTongList: '',
			priceList: '',
			selectYear: '',
			rangeYears: [],
		}
	},
	computed: {
		bgStyle() {	// 背景样式
			return {
				backgroundImage: `url(${bg1})`,
			}
		},
		lzqkImg() {	// 履职情况 图片
			return lzqk;
		},
		cyzbhdImg() {	// 政策帮助 图片
			return cyzbhd;
		},
		cardImg1() {
			return card_1;
		},
		cardImg2() {
			return card_2;
		},
		cardImg3() {
			return card_3;
		},
		cardImg4() {
			return card_4;
		},
		cardImg5() {
			return card_5;
		},
		cardImg6() {
			return card_6;
		},
		cardImg7() {
			return card_7;
		},
		cardImg8() {
			return card_8;
		},
		cardImg9() {
			return card_9;
		},
		cardImg10() {
			return card_10;
		},
		cardImg11() {
			return card_11;
		},
	},

	onLoad() {
		this.getYearData()
		var today = new Date();
		var year = today.getFullYear();
		this.$store.commit('updateYear', year)
		this.timeYear = this.$store.state.year
	},
	onShow() {
		this.getDangYuanData()
		this.getCanZhengScreen()
		this.getXuanChuanScreen()
		this.getZuZhiScreen()
		this.getFuPinData()
		this.getWenZhangData()
		this.getSheHuiData()
		this.getSheQingData()
		this.getZuZhiFaZhanData()
		this.getZuTongData()
		this.getPriceData()
		this.getDictData()
		this.getAdminFlag()
		// console.log('this.rangeYears', this.$store.state.rangeYears)

	},
	mounted() {




	},
	onReady() { },
	methods: {
		getAdminFlag() {

			admin().then(res => {
				uni.setStorageSync('hasAdmin', res.hasAdmin)
			})
		},

		change(e) {
			for (let item of this.rangeYears) {
				if (e === item.value) {
					this.timeYear = item.text.slice(0, -1)
					this.$store.commit('updateYear', this.timeYear)
				}
			}

			this.getDangYuanData()
			this.getCanZhengScreen()
			this.getXuanChuanScreen()
			this.getZuZhiScreen()
			this.getFuPinData()
			this.getWenZhangData()
			this.getSheHuiData()
			this.getSheQingData()
			this.getZuZhiFaZhanData()
			this.getZuTongData()
			this.getPriceData()
			this.getDictData()
		},
		onJump(path = '') {
			if (!path) return;
			this.$common.navigateTo(path);
		},
		jumpTo() {
			this.$common.switchTab('/pages/order-list/index')
		},
		getDictData() {
			dict().then(res => {
				let dictList = res
				uni.setStorageSync('dictData', JSON.stringify(dictList))

			})
		},



		getYearData() {
			lastYear().then(res => {
				this.rangeYears = res.rangeYear
				this.$store.commit('lastestYear', this.rangeYears)
				for (let item of this.rangeYears) {
					if (this.timeYear.toString() === item.text.slice(0, -1)) {
						this.selectYear = item.value

					}

				}

			})
		},


		getDangYuanData() {
			this.handlerLoading = true
			dangyuanfenxi({
				year: this.$store.state.year
			}).then(res => {
				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.dangYuanFenXiData = res;


				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},
		getCanZhengScreen() {
			this.handlerLoading = true
			canzhengdaping({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.canZhengScreenList = res;


				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},
		getXuanChuanScreen() {
			this.handlerLoading = true
			xcbdDetailHome({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.hzMapDatas = res


				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},
		getZuZhiScreen() {
			this.handlerLoading = true
			zuzhihuodongdaping({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.zuzhihuodongScreenList = res;


				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},

		getFuPinData() {
			this.handlerLoading = true
			fupin({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.fuPinData = res.personDataList.length;


				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},

		getWenZhangData() {
			this.handlerLoading = true
			xuanchuanwenzhang({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.wenZhangScreenList = res;


				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},

		getSheQingData() {
			sqmyDetailHome({
				year: this.$store.state.year
			}).then(res => {
				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {
					this.handlerLoading = true
					this.sheQingScreenList = res
				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},

		getSheHuiData() {
			this.handlerLoading = true
			shfwHomeApp({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.sheHuiScreenList = res;


				}

			}).catch(err => {
				console.log(err);
				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},

		getZuZhiFaZhanData() {
			this.handlerLoading = true
			zzfzHomeApp({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});

				} else {

					this.zuZhiFaZhanList = res.allFzCount;



				}

			}).catch(err => {

				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},


		getZuTongData() {
			this.handlerLoading = true
			ztgzHomeListApp({
				year: this.$store.state.year
			}).then(res => {
				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {
					this.zuTongList = res.peopleCount;
				}

			}).catch(err => {

				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		},
		getPriceData() {
			this.handlerLoading = true
			gzhjHomeCount({
				year: this.$store.state.year
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.priceList = res.allCount;


				}

			}).catch(err => {

				this.$common.errorToShow(err)
				this.handlerLoading = false;
			})
		}




	},
	onPullDownRefresh() {
		uni.showLoading({
			title: '刷新中...'
		});
		setTimeout(() => {
			uni.hideLoading();
		}, 1000);
		uni.stopPullDownRefresh()
	},
	onShareAppMessage() { // 分享
		let path = '/pages/index/index?id=' + this.userInfo.username;
		return {
			title: '模板示例小程序',
			imageUrl: '',
			path: path
		}
	},

}
</script>

<style lang="scss" scoped>
::v-deep .uni-select {
	height: 60rpx;
	border: 0;
	background-color: #ffffff;
}

.home {
	width: 100vw;

	.image-box {
		width: 100%;
		height: 100%;
	}

	.top_container {
		position: relative;
		top: 0;
		left: 0;
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100vw;
		padding: 0 32rpx 0;
		box-sizing: border-box;
		overflow: hidden;

		.selectCom {
			position: absolute;
			left: 64rpx;
			top: 228rpx;
			width: 140rpx;
			height: 48rpx;
			margin: 0px 0px 20px 16px;
		}

		// 员工信息区
		.card-user-msg {
			display: flex;
			flex-direction: column;
			width: 686rpx;
			height: 458rpx;
			margin-top: 334rpx;
			background: linear-gradient(180deg, #ffebce, #fdfbf4);
			border-top: 8rpx solid #dda783;
			border-radius: 8rpx;
			box-sizing: border-box;


			.row-1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 32rpx;
				padding: 0 40rpx;
				box-sizing: border-box;

				.image-box {
					width: 108rpx;
					height: 108rpx;
					border: 2rpx solid #ffffff;
					border-radius: 50%;
				}

				.user-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;

					margin-left: 20rpx;

					.user-name {
						font-size: 30rpx;
						font-weight: 600;
						color: #333333;
					}

					.user-dept {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #666666;
					}

				}

				.out-soft {
					display: flex;
					align-items: center;

					.icon {
						font-size: 40rpx;
						font-weight: 400;
						color: #a57d62;
					}

					.text {
						font-size: 26rpx;
						font-weight: 400;
						color: #a57d62;
					}
				}
			}

			.row-2 {
				margin-top: 32rpx;
				padding: 0 32rpx;
				box-sizing: border-box;

				.inner-row-2 {
					width: 622rpx;
					height: 64rpx;
					background: #ffffff;
				}
			}

			.row-3 {
				display: flex;
				margin-top: 18rpx;

				.row-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;

					.image-box {
						width: 160rpx;
						height: 140rpx;
					}

					.text {
						font-size: 24rpx;
						font-weight: 600;
						color: #333333;
					}
				}

			}
		}

		.card-box-1 {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			width: 100%;

			.left-box {
				position: relative;
				width: 332rpx;
				height: 242rpx;
				box-sizing: border-box;


				.msg-box {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					padding: 38rpx 32rpx;
					box-sizing: border-box;

					.title {
						font-size: 30rpx;
						font-weight: 600;
						color: #333333;
					}

					.msg {
						display: flex;
						margin-top: 10rpx;
						font-size: 12px;


						.text {
							color: #666666;
						}

						.num {
							margin-left: 10rpx;
							color: #666666;
						}
					}
				}
			}

			.right-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-box {
					position: relative;
					width: 332rpx;
					height: 110rpx;

					.msg {
						position: absolute;
						top: 0;
						left: 172rpx;
						display: flex;
						align-items: center;
						width: 100%;
						height: 100%;

						.text {
							font-size: 24rpx;
							color: #666666;
						}

						.num {
							margin-left: 10rpx;
							font-size: 24rpx;
							color: #666666;
						}
					}
				}

			}
		}

		.card-box-2 {
			display: flex;
			justify-content: space-between;
			margin-top: 22rpx;

			.item-box {
				position: relative;
				width: 332rpx;
				height: 144rpx;

				.msg {
					position: absolute;
					top: 82rpx;
					left: 32rpx;
					display: flex;

					.text {
						font-size: 12px;
						color: #666666;
					}

					.num {
						margin-left: 10rpx;
						font-size: 12px;
						color: #666666;
					}
				}
			}
		}

		.card-box-3 {
			margin-bottom: 60rpx;

			.card-box-inner {
				display: flex;
				justify-content: space-between;
				margin-top: 22rpx;

				.item-box {
					position: relative;
					width: 214rpx;
					height: 148rpx;

					.msg {
						position: absolute;
						top: 82rpx;
						left: 32rpx;
						display: flex;
						width: 100%;
						height: 100%;

						.text {
							font-size: 12px;
							color: #666666;
						}

						.num {
							margin-left: 10rpx;
							font-size: 12px;
							color: #666666;
						}
					}
				}
			}
		}
	}
}
</style>
